<template>
  study1-{{msg}}-{{count}}
  <div>
    用户ID：{{userInfo.id}}
  </div>
  <div>
    用户名：{{userInfo.name}}
  </div>
  <div>
    用户2ID：{{userInfo2.id}}
  </div>
  <div>
    用户3名：{{userInfo2.name}}
  </div>
</template>
<script setup lang="ts">
import { ref,onMounted,reactive } from 'vue';
interface UserInfo {
  id?: string | number,
  name?: string | undefined
}
const msg = ref<string>('a')
const count = ref<number>(1)
const userInfo = reactive<UserInfo>({
  id: 1
})
const userInfo2 = ref<UserInfo>({
  id: 1
})
onMounted(()=>{
  setTimeout(()=>{
    msg.value = 'b'
    count.value = 3
    userInfo.id = 444
    userInfo.name = "张三"
    userInfo2.value = {
      id: 1,
      name: '李四'
    }
  },2000)
})
</script>
<style scoped></style>